import { useState } from 'react'
import { User, Bell, Shield, Palette, Globe, Database, Save } from 'lucide-react'
import './Settings.css'

const Settings = () => {
  const [activeSection, setActiveSection] = useState('profile')
  const [settings, setSettings] = useState({
    // Profile settings
    username: '张三',
    email: 'zhangsan@example.com',
    phone: '13800138000',
    avatar: 'https://via.placeholder.com/100x100/667eea/ffffff?text=ZS',
    
    // Notification settings
    emailNotifications: true,
    pushNotifications: false,
    smsNotifications: true,
    
    // Security settings
    twoFactorAuth: false,
    loginAlerts: true,
    
    // Appearance settings
    theme: 'light',
    language: 'zh-CN',
    
    // System settings
    autoBackup: true,
    dataRetention: '30',
    maxFileSize: '100'
  })

  const sections = [
    { id: 'profile', label: '个人资料', icon: User },
    { id: 'notifications', label: '通知设置', icon: Bell },
    { id: 'security', label: '安全设置', icon: Shield },
    { id: 'appearance', label: '外观设置', icon: Palette },
    { id: 'system', label: '系统设置', icon: Database }
  ]

  const handleInputChange = (key, value) => {
    setSettings(prev => ({
      ...prev,
      [key]: value
    }))
  }

  const handleSave = () => {
    // Here you would typically save to backend
    alert('设置已保存！')
  }

  return (
    <div className="settings">
      <div className="settings-header">
        <h1>设置</h1>
        <p>管理您的账户和应用程序设置</p>
      </div>

      <div className="settings-content">
        <div className="settings-sidebar">
          {sections.map((section) => {
            const Icon = section.icon
            return (
              <button
                key={section.id}
                className={`settings-nav-item ${activeSection === section.id ? 'active' : ''}`}
                onClick={() => setActiveSection(section.id)}
              >
                <Icon size={20} />
                {section.label}
              </button>
            )
          })}
        </div>

        <div className="settings-main">
          {activeSection === 'profile' && (
            <div className="settings-section">
              <h2>个人资料</h2>
              <div className="form-group">
                <div className="avatar-section">
                  <img src={settings.avatar} alt="头像" className="avatar" />
                  <button className="avatar-upload">更换头像</button>
                </div>
              </div>
              <div className="form-group">
                <label>用户名</label>
                <input
                  type="text"
                  value={settings.username}
                  onChange={(e) => handleInputChange('username', e.target.value)}
                />
              </div>
              <div className="form-group">
                <label>邮箱</label>
                <input
                  type="email"
                  value={settings.email}
                  onChange={(e) => handleInputChange('email', e.target.value)}
                />
              </div>
              <div className="form-group">
                <label>手机号</label>
                <input
                  type="tel"
                  value={settings.phone}
                  onChange={(e) => handleInputChange('phone', e.target.value)}
                />
              </div>
            </div>
          )}

          {activeSection === 'notifications' && (
            <div className="settings-section">
              <h2>通知设置</h2>
              <div className="form-group">
                <div className="switch-item">
                  <div>
                    <h4>邮件通知</h4>
                    <p>接收重要更新和消息的邮件通知</p>
                  </div>
                  <label className="switch">
                    <input
                      type="checkbox"
                      checked={settings.emailNotifications}
                      onChange={(e) => handleInputChange('emailNotifications', e.target.checked)}
                    />
                    <span className="slider"></span>
                  </label>
                </div>
              </div>
              <div className="form-group">
                <div className="switch-item">
                  <div>
                    <h4>推送通知</h4>
                    <p>在浏览器中接收推送通知</p>
                  </div>
                  <label className="switch">
                    <input
                      type="checkbox"
                      checked={settings.pushNotifications}
                      onChange={(e) => handleInputChange('pushNotifications', e.target.checked)}
                    />
                    <span className="slider"></span>
                  </label>
                </div>
              </div>
              <div className="form-group">
                <div className="switch-item">
                  <div>
                    <h4>短信通知</h4>
                    <p>接收重要安全提醒的短信</p>
                  </div>
                  <label className="switch">
                    <input
                      type="checkbox"
                      checked={settings.smsNotifications}
                      onChange={(e) => handleInputChange('smsNotifications', e.target.checked)}
                    />
                    <span className="slider"></span>
                  </label>
                </div>
              </div>
            </div>
          )}

          {activeSection === 'security' && (
            <div className="settings-section">
              <h2>安全设置</h2>
              <div className="form-group">
                <div className="switch-item">
                  <div>
                    <h4>双因素认证</h4>
                    <p>为您的账户添加额外的安全层</p>
                  </div>
                  <label className="switch">
                    <input
                      type="checkbox"
                      checked={settings.twoFactorAuth}
                      onChange={(e) => handleInputChange('twoFactorAuth', e.target.checked)}
                    />
                    <span className="slider"></span>
                  </label>
                </div>
              </div>
              <div className="form-group">
                <div className="switch-item">
                  <div>
                    <h4>登录提醒</h4>
                    <p>当有新设备登录时发送提醒</p>
                  </div>
                  <label className="switch">
                    <input
                      type="checkbox"
                      checked={settings.loginAlerts}
                      onChange={(e) => handleInputChange('loginAlerts', e.target.checked)}
                    />
                    <span className="slider"></span>
                  </label>
                </div>
              </div>
              <div className="form-group">
                <label>修改密码</label>
                <button className="secondary-btn">更改密码</button>
              </div>
            </div>
          )}

          {activeSection === 'appearance' && (
            <div className="settings-section">
              <h2>外观设置</h2>
              <div className="form-group">
                <label>主题</label>
                <select
                  value={settings.theme}
                  onChange={(e) => handleInputChange('theme', e.target.value)}
                >
                  <option value="light">浅色主题</option>
                  <option value="dark">深色主题</option>
                  <option value="auto">跟随系统</option>
                </select>
              </div>
              <div className="form-group">
                <label>语言</label>
                <select
                  value={settings.language}
                  onChange={(e) => handleInputChange('language', e.target.value)}
                >
                  <option value="zh-CN">简体中文</option>
                  <option value="en-US">English</option>
                  <option value="ja-JP">日本語</option>
                </select>
              </div>
            </div>
          )}

          {activeSection === 'system' && (
            <div className="settings-section">
              <h2>系统设置</h2>
              <div className="form-group">
                <div className="switch-item">
                  <div>
                    <h4>自动备份</h4>
                    <p>定期自动备份您的数据</p>
                  </div>
                  <label className="switch">
                    <input
                      type="checkbox"
                      checked={settings.autoBackup}
                      onChange={(e) => handleInputChange('autoBackup', e.target.checked)}
                    />
                    <span className="slider"></span>
                  </label>
                </div>
              </div>
              <div className="form-group">
                <label>数据保留期限（天）</label>
                <input
                  type="number"
                  value={settings.dataRetention}
                  onChange={(e) => handleInputChange('dataRetention', e.target.value)}
                />
              </div>
              <div className="form-group">
                <label>最大文件大小（MB）</label>
                <input
                  type="number"
                  value={settings.maxFileSize}
                  onChange={(e) => handleInputChange('maxFileSize', e.target.value)}
                />
              </div>
            </div>
          )}

          <div className="settings-actions">
            <button className="primary-btn" onClick={handleSave}>
              <Save size={20} />
              保存设置
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Settings
